<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="strlesheet" href="css/pagination.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        table tbody tr:nth-child(odd){background:#F4F4F4;}
        table tbody td:nth-child(even){color:#C00;}

    </style>
    <title>众筹网</title>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 用户维护</a></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li style="padding-top:8px;">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-success dropdown-toggle" data-toggle="dropdown">
                            <i class="glyphicon glyphicon-user"></i> [[${user.userName}]] <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#"><i class="glyphicon glyphicon-cog"></i> 个人设置</a></li>
                            <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
                            <li class="divider"></li>
                            <li><a href="index"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                        </ul>
                    </div>
                </li>
                <li style="margin-left:10px;padding-top:8px;">
                    <button type="button" class="btn btn-default btn-danger">
                        <span class="glyphicon glyphicon-question-sign"></span> 帮助
                    </button>
                </li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>
<section id="mainContentId"	 class="content container-fluid">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
                <div class="tree">
                    <ul style="padding-left:0px;" class="list-group">
                        <li class="list-group-item tree-closed" >
                            <a href="main"><i class="glyphicon glyphicon-dashboard"></i> 控制面板</a>
                        </li>
                        <li class="list-group-item">
                            <span><i class="glyphicon glyphicon glyphicon-tasks"></i> 权限管理 <span class="badge" style="float:right">3</span></span>
                            <ul style="margin-top:10px;">
                                <li style="height:30px;">
                                    <a href="user" style="color:red;"><i class="glyphicon glyphicon-user"></i> 用户维护</a>
                                </li>
                                <li style="height:30px;">
                                    <a href="role"><i class="glyphicon glyphicon-king"></i> 角色维护</a>
                                </li>
                                <li style="height:30px;">
                                    <a href="permission"><i class="glyphicon glyphicon-lock"></i> 菜单维护</a>
                                </li>
                            </ul>
                        </li>
                        <li class="list-group-item tree-closed">
                            <span><i class="glyphicon glyphicon-ok"></i> 业务审核 <span class="badge" style="float:right">3</span></span>
                            <ul style="margin-top:10px;display:none;">
                                <li style="height:30px;">
                                    <a href="auth_cert"><i class="glyphicon glyphicon-check"></i> 实名认证审核</a>
                                </li>
                                <li style="height:30px;">
                                    <a href="auth_adv"><i class="glyphicon glyphicon-check"></i> 广告审核</a>
                                </li>
                                <li style="height:30px;">
                                    <a href="auth_project"><i class="glyphicon glyphicon-check"></i> 项目审核</a>
                                </li>
                            </ul>
                        </li>
                        <li class="list-group-item tree-closed">
                            <span><i class="glyphicon glyphicon-th-large"></i> 业务管理 <span class="badge" style="float:right">7</span></span>
                            <ul style="margin-top:10px;display:none;">
                                <li style="height:30px;">
                                    <a href="cert"><i class="glyphicon glyphicon-picture"></i> 资质维护</a>
                                </li>
                                <li style="height:30px;">
                                    <a href="type"><i class="glyphicon glyphicon-equalizer"></i> 分类管理</a>
                                </li>
                                <li style="height:30px;">
                                    <a href="process"><i class="glyphicon glyphicon-random"></i> 流程管理</a>
                                </li>
                                <li style="height:30px;">
                                    <a href="advertisement"><i class="glyphicon glyphicon-hdd"></i> 广告管理</a>
                                </li>
                                <li style="height:30px;">
                                    <a href="message"><i class="glyphicon glyphicon-comment"></i> 消息模板</a>
                                </li>
                                <li style="height:30px;">
                                    <a href="project_type"><i class="glyphicon glyphicon-list"></i> 项目分类</a>
                                </li>
                                <li style="height:30px;">
                                    <a href="tag"><i class="glyphicon glyphicon-tags"></i> 项目标签</a>
                                </li>
                            </ul>
                        </li>
                        <li class="list-group-item tree-closed" >
                            <a href="param"><i class="glyphicon glyphicon-list-alt"></i> 参数管理</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                    </div>
                    <div class="panel-body">
                        <form class="form-inline" role="form" style="float:left;">
                            <div class="form-group has-feedback">
                                <div class="input-group">
                                    <div class="input-group-addon">查询条件</div>
                                    <input class="form-control has-success" id="selectAdmin" type="text" placeholder="请输入查询条件">
                                </div>
                            </div>
                            <button type="button" class="btn btn-warning" onclick="doSelectAdmin()"><i class="glyphicon glyphicon-search"></i> 查询</button>
                        </form>
                        <button type="button" class="btn btn-danger" onclick="doDeleteAdminById()" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
                        <button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='add'"><i class="glyphicon glyphicon-plus"></i> 新增</button>
                        <br>
                        <hr style="clear:both;">
                        <div class="table-responsive">
                            <table class="table  table-bordered">
                                <thead>
                                <tr >
                                    <th width="30">序号</th>
                                    <th width="30"><input id="checkAll" type="checkbox"></th>
                                    <th>账号</th>
                                    <th>名称</th>
                                    <th>邮箱地址</th>
                                    <th width="100">操作</th>
                                </tr>
                                </thead>
                                <tbody id="tbodyId">
                                <tr>
                                    <td colspan="6">数据正在加载中...</td>
                                </tr>


                                </tbody>
                                <tfoot>
                                <tr >
                                    <td colspan="6" align="center">

                                        <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                                    </td>
                                </tr>

                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</section>


<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="jquery/jquery.pagination.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script/docs.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });

        doSelectAdmin();

        $("#checkAll").click(doChangeTBodyCheckBoxState);
        $("#tbodyId").on("change","input:checkbox",doChangeTHeadCheckBoxState)

    });
    $("tbody .btn-success").click(function(){
        window.location.href = "assignRole";
    });
    $("tbody .btn-primary").click(function(){
        window.location.href = "edit";
    });
    function doDeleteAdminByOneId(id) {
        if(!confirm("确认删除吗"))return;
        const url = "/doDeleteAdminById";
        var params={"ids":id};
        $.getJSON(url, params, function (result) {
            if(result.state==1){
                alert(result.message);
                doSelectAdmin();
            }else{
                alert(result.message);
                //doSetQueryErrors(result.message);
            }

        })
    }
    function doDeleteAdminById() {
        var ids=doGetCheckedIds();
        if(ids.length==0){
            alert("至少选一个");
            return;
        }
        if(!confirm("确认删除吗"))return;
        const url = "/doDeleteAdminById";
        var params={"ids":ids.toString()};
        console.log(params);
        $.getJSON(url, params, function (result) {
            if(result.state==1){
                alert(result.message);
                doRefreshAfterDeleteOK();
                // doGetObjects();
            }else{
                alert(result.message);
                //doSetQueryErrors(result.message);
            }
        })
    }
    function doGetCheckedIds() {
        var idArray=[];
        $("#tbodyId input[type=checkbox]").each(
            function () {
                if($(this).prop("checked"))idArray.push($(this).val());
            })
        return idArray;
    }
    function doRefreshAfterDeleteOK() {
        //var pageNum=$("#pageId").data("pageNum");
        //var pageCurrent=$("#pageId").data("pageCurrent");
        //var checked=$("#checkAll").prop("checked");
        /*if(checked){
            pageCurrent--;
            $("#pageId").data("pageCurrent",pageCurrent);
        }*/
        doSelectAdmin();
    }
    function doChangeTBodyCheckBoxState() {
        var flag=$(this).prop("checked");//true or false
        //2.将tbody中所有checkbox元素的值都修改为flag对应的值。
        /*$("#tbodyId input[name='cItem']").each(function () {
            $(this).prop("checked",flag);
        })*/
        $("#tbodyId input:checkbox").prop("checked",flag);
    }
    function doChangeTHeadCheckBoxState() {
        var flag=true;
        $("#tbodyId input:checkbox").each(function () {
            flag=  flag&&$(this).prop("checked")
        });
        $("#checkAll").prop("checked",flag);
    }
    function doSelectAdmin() {
        $("#checkAll").prop("checked",false);
        var pageNum = $(".pagination").data("pageNum");
        var uname=$("#selectAdmin").val();
        console.log(uname);
        //参数封装
        let params={"pageNum":pageNum};//json格式的js对象
        if(uname)params.keyword=uname;
        const url="/admin/page.html";
        $.getJSON(url, params, function (result) {
            doSetTableBodyRows(result);
            initPagination(result);
        })
    }
    function initPagination(pageInfo) {
        var totalRecord=pageInfo.data.total;
        //声明一个JSON对象存储Pagination要设置的属性
        var properties={
            num_edge_entries: 1,               //边缘页数
            num_display_entries: 2,				//主体页数
            callback:pageSelectCallback,		//用户点击1,2,3调用这个函数实现页面跳转
            items_per_page:pageInfo.data.pageSize, //每页显示的数量
            current_page: (pageInfo.data.pageNum-1), //Pagination内部使用pageIndex来管理,pageIndex从0开始,pageNum从1开始,所以减一
            prev_text: "上一页",
            next_text: "下一页"
        };
        //生成导航条
        $("#Pagination").pagination(totalRecord,properties);

    }
    //用户点击1,2,3调用这个函数实现页面跳转
    function pageSelectCallback(pageIndex,jQuery) {
        $("#checkAll").prop("checked",false);
        var pageNum = $(".pagination").data("pageNum");
        var uname=$("#selectAdmin").val();
        console.log(uname);
        //参数封装
        let params={"pageNum":pageNum};//json格式的js对象
        if(uname)params.keyword=uname;
        const url="/admin/page.html";
        //跳转页面
        $.getJSON(url, params, function (result) {
            doSetTableBodyRows(result);
        })
        return false;
    }
    function doSetTableBodyRows(pageInfo) {
        //1.获取tbody对象并清空内存
        var tBody = $("#tbodyId");
        tBody.empty();
        //2.遍历records并将结果更新到页面上.
        //for(var i in records) {      //数据量大的时候,性能较差    i的作用域不严谨
        /*for(let i=0;i<records.length;i++){
            var tr = $("<tr></tr>");
            var tds=doCreateTds(records[i]);
            tr.append(tds);
            tBody.append(tr);
        }*/
        //console.log(pageInfo);
        var record=pageInfo.data.list;
        //console.log(record);
        record.forEach(record => tBody.append(doCreateTds(record)))
        number();
    }


    function doCreateTds(data) {
        return `<tr>
							<td><span class="numberClass"></span></td>
							<td><input type="checkbox" class="cBox"  name="cItem" value="${data.id}"></td>
							<td>${data.loginAcct}</td>
							<td>${data.userName}</td>
							<td>${data.email}</td>
							<td>
								<button type="button" class="btn btn-success btn-xs" onclick="window.location.href='assignRole?adminId=${data.id}'">  <i class=" glyphicon glyphicon-check"></i></button>
								<button type="button" class="btn btn-primary btn-xs" onclick="doFindAdminById(${data.id})"><i class=" glyphicon glyphicon-pencil"></i></button>
								<button type="button" class="btn btn-danger btn-xs" onclick="doDeleteAdminByOneId(${data.id})"><i class=" glyphicon glyphicon-remove"></i></button>
							</td>
						</tr>`
    }
    function number(){
        for(var i=0;i< $(".numberClass").length;i++){
            $(".numberClass").get(i).innerHTML = i+1;
        }
    }
    // function doAssignRoleById(id) {
    // 	var url="/doAssignRoleById";
    // 	var params={"id":id};
    // 	$.getJSON(url,params,function (data) {
    // 		//console.log(data);
    // 		doUpdateAdmin(data.data);
    // 	})
    //
    // }
    function doFindAdminById(id) {

        var url="/doFindAdminById";
        var params={"id":id};
        $.getJSON(url,params,function (data) {
            //console.log(data);
            doUpdateAdmin(data.data);
        })
    }
    function doUpdateAdmin(data) {
        //console.log(data)
        console.log(data.loginAcct)
        $("#mainContentId").load("add",function(){
            $(".active").html("修改");
            $(".btn-success").html("修改");
            $("#AdminId").val(data.id);
            $("#exampleInputPassword1").val(data.loginAcct);
            $("#exampleInputPassword2").val(data.userPswd);
            $("#exampleInputPassword3").val(data.userName);
            $("#exampleInputEmail1").val(data.email);
        })



    }


</script>
</body>
</html>
